<script setup lang="ts">
import draggable from 'vuedraggable';
import { isH5 } from '@/utils/env';

// 定义精确的类型接口
interface MenuItem {
  path: string;
  icon: string;
  pmsName: string;
  ingShowFlag?: boolean;
  ing?: string | number;
}

interface IProps {
  ywObj: {
    isMoreShow: boolean;
    arr: MenuItem[];
    title: [string, string];
  };
}

const props = defineProps<IProps>();

// 使用computed确保showMenu随ywObj变化自动更新
const showMenu = computed<MenuItem[]>(() => {
  if (props.ywObj.isMoreShow) {
    return props.ywObj.arr.slice(0, 7); // 收起状态显示前7项
  } else {
    return props.ywObj.arr; // 展开状态显示所有项
  }
});

// 通过emit通知父组件更新状态（遵循单向数据流）
const emit = defineEmits<{
  (e: 'update:isMoreShow', value: boolean): void;
}>();

// 处理更多/收起点击
const moreClick = () => {
  emit('update:isMoreShow', !props.ywObj.isMoreShow);
};

// 路由跳转封装
const toLink = (path: string) => {
  if (path) {
    // 为项目管理相关页面添加from参数
    if (path.includes('/subpackages/project/') && !path.includes('?')) {
      router.push(`${path}?from=Home`);
    } else {
      router.push(path);
    }
  }
};

const isDraggable = ref(false);
const onEnd = (evt: any) => {
  console.log('拖拽结束', evt);
  console.log('new list', showMenu.value);
};
</script>

<template>
  <view class="menu mb-2" v-if="showMenu.length">
    <view class="menu-header color-gray-5 px-3">
      <span class="text-14">{{ ywObj.title[0] }}</span>
      <span class="text-10 pl-2">{{ ywObj.title[1] }}</span>
    </view>
    <view class="bg-white menu-block">
      <view v-if="isH5() && isDraggable" class="grid-container">
        <draggable
          :list="showMenu"
          item-key="icon"
          @end="onEnd"
          class="draggable-wrapper"
          ghost-class="ghost"
        >
          <template #item="{ element }">
            <view class="grid-item text-25 my-10">
              <up-badge
                v-if="element.ingShowFlag && element.ing !== undefined && +element.ing"
                :content="+element.ing"
                max="99"
              >
                <app-icon :name="element.icon.split('-').slice(1).join('-')" multi />
                <view class="text-12">{{ element.pmsName }}</view>
              </up-badge>
              <view v-else>
                <app-icon :name="element.icon.split('-').slice(1).join('-')" multi />
                <view class="text-12">{{ element.pmsName }}</view>
              </view>
            </view>
          </template>
        </draggable>
        <view class="grid-item text-25 my-10" v-if="ywObj.isMoreShow" @click="moreClick()">
          <view>
            <app-icon :name="'gengduo'" multi />
            <view class="text-12">更多</view>
          </view>
        </view>
      </view>
      <view v-else class="flex flex-wrap text-center">
        <view
          class="text-25 my-10 menu-block__item"
          v-for="(yw, index) in showMenu"
          :key="'yw' + index"
          @click="toLink(yw.path)"
        >
          <up-badge
            v-if="yw.ingShowFlag && yw.ing !== undefined && +yw.ing"
            :content="+yw.ing"
            max="99"
          >
            <app-icon :name="yw.icon.split('-').slice(1).join('-')" multi />
            <view class="text-12">{{ yw.pmsName }}</view>
          </up-badge>
          <view v-else>
            <app-icon :name="yw.icon.split('-').slice(1).join('-')" multi />
            <view class="text-12">{{ yw.pmsName }}</view>
          </view>
        </view>
        <view class="text-25 my-10 menu-block__item" v-if="ywObj.isMoreShow" @click="moreClick()">
          <view>
            <app-icon :name="'gengduo'" multi />
            <view class="text-12">更多</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.menu {
  &-header {
    width: fit-content;
    height: 64rpx;
    line-height: 64rpx;
    background: #ecf2fe;
    border-radius: 20rpx 20rpx 0 0;
  }

  &-block {
    border-radius: 0 10rpx 10rpx;

    &__item {
      width: 25%;
      box-sizing: border-box;
    }
  }
}

/* 整个容器使用 Grid 布局，每行 4 个 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* draggable 默认会生成一个 <div>，我们让它不占位 */
.draggable-wrapper {
  grid-column: span 4; /* 占满 4 列 */
  display: contents; /* 关键：让 draggable 的子元素直接参与 grid 布局 */
}

.grid-item {
  cursor: move;
  text-align: center;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
